<template>
  <div
    v-show="visiable"
    class="map-mask"
    :style="{ backgroundImage: maskStyleValue }"
  >
    <!-- <div class="map-top" :style="{ backgroundImage: homeHeadMaskStyleValue }"></div> -->
  </div>
</template>
<script>
export default {
  data () {
    return {
      visiable: false
    };
  },
  computed: {
    maskStyleValue () {
      // return 'radial-gradient(rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0) 34%,rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0,0.7) 100%)';
      return 'radial-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.65) 42%, rgba(0, 0, 0, 0.9) 100%)';
      // this.$store.getters.homeMapMask;
    }
    // homeHeadMaskStyleValue() {
    // 	return this.$store.getters.maskValues.homeHeadMask;
    // }
  },
  methods: {
    show (v) {
      this.visiable = v;
    }
  }
};
</script>

<style scoped lang="less">
.map-mask {
  position: absolute;
  top: -179px;
  width: 100%;
  height: 138%;
  pointer-events: none;
  background-position: center center;
  background-size: 100% 100%;
  // background-image: radial-gradient(transparent 30%, #000);
  // background-image: radial-gradient(transparent 30%, #000);
  // background-image: radial-gradient(transparent, rgba(0, 0, 0, 0.8));
  // background-image: linear-gradient(to right, rgba(0, 0, 0, 1), transparent, transparent);
}

.map-top {
  position: absolute;
  top: 0;
  width: 100%;
  height: 22%;
  // background-image: linear-gradient(rgba(0, 0, 0, 0.4), transparent);
  z-index: 40;
}
</style>
